<template>
    <div class="flex justify-center h-full">
        <div class="w-1/2 h-full flex flex-col items-center">
            <div class="flex flex-col items-start h-full">
                <!-- 标题 -->
                <h1 class="text-4xl font-bold mb-4 mt-12">💥 Hi，我是大模型 AI 应用构建器</h1>
                <!-- 副标题 -->
                <h3 class="text-2xl font-bold mt-4 mb-6">您的专属 <span class="text-blue-700">AI 原生应用</span> 开发平台</h3>

                <!-- 介绍 -->
                <p class="text-base my-2 px-4" v-for="introduce in introduces" :key="introduce">
                    {{ introduce }}
                </p>

                <div class="my-6" />

                <!-- 提示 -->
                <div class="border border-gray-200 px-4 py-2 rounded-xl bg-white my-2 text-base" v-for="tip in tips"
                    :key="tip">
                    {{ tip }}
                </div>
            </div>

            <!-- 输入框 -->
            <div class="flex items-center gap-4 px-6 w-full mb-4">
                <!-- 清空消息按钮 -->
                <a-button class="flex-shrink-0" type="text" shape="circle" @click="onDev" disabled>
                    <template #icon>
                        <icon-empty size="24" :style="{ 'color': '#374751' }" />
                    </template>
                </a-button>
                <div class="h-[50px] flex flex-1 items-center gap-2 px-4 rounded-full bg-white">
                    <input type="text" class="flex-1 outline-0" :placeholder="placeholder" disabled />
                    <!-- 发送按钮 -->
                    <a-button type="text" shape="circle" @click="onDev" disabled>
                        <template #icon>
                            <icon-send size="24" :style="{ 'color': '#1d4ed8' }" />
                        </template>
                    </a-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import message from '@/utils/message'
import { ref } from 'vue'

const placeholder = ref('请告诉我想创建一个什么样的应用，可以描述一下应用的角色、功能、目标群体等')

const introduces = ref([
    '😆 创意孵化：告诉我们您的创意，我们将迅速为您打造专属的 AI 应用。',
    '💻 多渠道发布：一键分享给朋友，或轻松发布到 AI 开发平台、开放API、微信等，让创意触达每一个角落。',
    '🔍 个性化体验：根据您的需求，定制化开发，让每个应用都独一无二。',
    '🌱 持续支持：从构思到上线，我们提供全方位的支持，让您的创意蓬勃发展。',
    '🔌 应用广场 & 插件市场：探索、发现、灵感迸发。这里有无限的创意和丰富的插件，等待您的挖掘。',
    '🎉 立即加入：不要犹豫，现在就开始您的 AI 应用构建之旅。让我们一起，用智能技术开启无限可能！'
])

const tips = ref([
    '✍ 我想要一个工作汇报专家，能够根据我提供的资料生成项目总结汇报、周报或会议纪要等',
    '📷 实现一个拍摄脚本辅助创作的应用，输入一段故事，返回分镜及拍摄脚本',
    '🍜 创建一个根据食物组合生成菜谱的应用',
    '💡 我没有想法，但想创建个应用'
])

const onDev = () => {
    message.info('开发中，敬请期待')
}
</script>

<style scoped></style>